How to get menus to change active selection. (Documentation)

jagooding commented 10 years ago

I am trying to figure out how to get menus to change the active selection on a click, like in http://semantic-ui.com/collections/menu.html

I've got a fiddle set up here, where as you can see, it doesn't update the active selection upon clicking. http://jsfiddle.net/xLTuJ/6/

Anachron commented 10 years ago

Got it working! http://jsfiddle.net/xLTuJ/13/

Really hope the @Semantic-Org will put this into the core or as little addon-snippet.

jagooding commented 10 years ago

@Anachron HAHAHA, that's awesome man, I'm sitting here racking my head reading through hundreds of lines of code to figure out where that damn semantic variable came from, and you just got rid of it.

Anachron commented 10 years ago

@jagooding Welcome, it's coming from http://semantic-ui.com/javascript/semantic.js and I thought you won't include that script anyway, so why not just get rid off the dropdown and the other stuff.

jlukic commented 10 years ago

There's an undocumented module in semantic state which has features for activating different states of UI, i've used it extensively but haven't had time to rewrite some bits, and create documentation.

It's also tied into api and other behavior components, this will all be part of 1.0, letting components activate after an API request finishes, or update with information from an AJAX request.

jagooding commented 10 years ago

Thanks @jlukic

Do you have an idea on how much rewriting will have to be done for an application once 1.0 comes out? And is there a approximate time for when 1.0 is going to be released?

jlukic commented 10 years ago

Late march - april.

There will be a list of breaking changes, most likely these will have little effect unless you are using undocumented components like api tab state and search which will get modest rewrites.

There will be explicit structure for user overrides and variables, which will affect any codebase that have manual solutions for this currently.

abhasgupta commented 10 years ago

i have applied ur state.js nd my menus stil not change the active selection on a click

Quadramma commented 10 years ago

jlukic !, hi there!. I just trying semantic ui and i wonder how its the manual solution you mention to get state.js working. Its actually functional ?. regards !.

jlukic commented 10 years ago

State allows you to do things like

Tie loading state to AJAX requests
Tie text to different states, so for example having a button go from `Follow to Followed to Unfollow`` on hover depending on its current state
Tie multiple elements state to each other, for example, automatically having all follow buttons activate on a page after a successfully activating one button.
Give activate/deactivate test functions which give criteria to allow or reject an item 'activating'
Handle correctly removing/adding class names signifying states without having to have garbled addClass removeClass sprinkled over your site

I recommend using the (latest versions in 1.0 branch)[https://github.com/Semantic-Org/Semantic-UI/tree/css/src/definitions/behaviors]

Simple activate example

// immediately activates element
$('.my.button')
  .state('activate')
;
// activates element on click
$('.my.button')
 .state()
;

API example

// typically you'd define all your templated urls in one config file
$.fn.api.settings.api.follow = '/api/follow/{id}/' 
$('.foo.button')
  .state()
  .api({ action: 'follow' })
;

<div class="ui foo button" data-id="22">

Text example


// Changes button between Follow and Following
$('.follow.button')
  .state({
    text: {
      inactive : 'Follow',
      active   : 'Following'
    }
  })
;

// Changes text on activation and hover
// The hover text is different when active and inactive
$('vote.button')
  .state({
    text: {
      inactive : 'Vote',
      enable   : 'Cast Vote',
      active   : 'Voted',
      disable  : 'Remove Vote'
    }
  })
;

Quadramma commented 10 years ago

Hi jlukic, thanks for the info, well explain too :) I had no time for test that, but i will, and i will post feedbak. regards!.

gurutvakarshan commented 6 years ago

hi jlukic, i tried your Simple activate example with Tabular menu for my site and its working for me, but its state just show and go like blink.it is not staying activate at all.what to do sir? also how can i learn ui's jquery as you explain in your example.

smartin36 commented 3 years ago

any luck with this gurutvakarshan? having the same problem.

Semantic-Org / Semantic-UI