I was wondering if there's someone who can give me something to start for the following situation:
We have a sortable list (standard ionic) where I need some options on the drop place. I'll try to explain it with an example.
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li name="dropplace">
<span name="option1"></span>
<span name="option2"></span>
<span name="option3"></span>
</li>
<li>list item 4</li>
</ul>
depending on which option the user drops the list item, another actions needs to happen.
I don't know how to begin on the following:
- when dragging, create the drop place with the options
- link the dragging list item to one of the options when hovering
- Do an action when dropping on one of the options
Thanks in advance!
Greetings,
Leander
I'm quite sure Ionic does not provide a sortable widget out of the box. You can use this one, for example, which is basically an AngularJS wrapper around jQuery Sortable Widget. You'll be able to capture the drop event easily and to perform whatever other tasks you need.
Related
Using
<div class="lift:Menu.builder"/>
menu on website is vertically, any ideas because i cant found anywhere, how to make menu across ?
This is more a CSS question than a Lift question. The HTML produced for the menu looks something like this:
<div class="column span-6 colborder sidebar">
<hr class="space" />
<ul>
<li> <span>Home</span></li>
<li> Login</li>
<li> Sign Up</li>
<li> Lost Password</li>
<li> Search</li>
</ul>
...
</div>
I.e., about as vanilla as possible, so it's very easy to add some CSS to create a horizontal menu out of the list—see for example the "Horizontal lists" examples on Listamatic.
It would be simplest just to add the CSS code to the header in src/main/webapp/templates-hidden/default.html, but you could also use your own separate CSS file without too much fuss.
I'm trying to create a custom widget that would internally be
represented by a simple DIV and a BUTTON element, but which would accept
other widgets inside it, pretty much like HTMLPanel.
So, I want something like this...
<div class="XXX">
<button class="YYY"></button>
{other widget(s) here}
</div>
...encapsulated inside some widget, say WrapperWidget. Then, I could use
this WrapperWidget inside some other (multiple) ui.xml files:
<ns:WrapperWidget>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</ns:WrapperWidget>
How is that achievable in GWT?
Thanks!
I don't use UI binder, so I can't help you there.
To nest widgets, one would usually use a Composite http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/Composite.html
How can I determine the page I am currently on in Lift?
In django, for example, in my base template I had simple checks like these:
<li {% ifequal main_navigation "home" %} class="selected"{%endifequal%}>
Home
</li>
<li {% ifequal main_navigation "risk"%}class="selected"{%endifequal%}>
Risk
</li>
<li {% ifequal main_navigation "contact" %}class="selected"{%endifequal%}>
Contact
</li>
here, the if determines what the context variable main_navigation is set to.
I'm assuming you're using the sitemap for your menu.
When rendering the menu with the Menu.builder snippet you can use additional parameters to further tweak the menu. This example will render only the first level of the menu and adds class current to the menu item if it's the current page.
designer friendly example:
<div class="lift:Menu.builder?level=0;expand=false;li_item:class=current"></div>
or
<lift:Menu.builder li_item:class="selected" level="0" expand="false" />
for more details see the lift wiki: http://www.assembla.com/wiki/show/liftweb/SiteMap
If you use Lift's SiteMap and Menu functionality, I think this is taken care of automatically. You can read about it here: http://simply.liftweb.net/index-3.2.html#toc-Subsection-3.2
To answer your broader question, within a Snippet (not a template), you can use LiftRules.context, which returns an HTTPContext including a path attribute.
I am using jQtouch for my iPhone application,
I need to check box filed, in jQtouch we have the code below like this.
<ul>
<li>
Toggle The <span class="toggle"><input type="checkbox"/></span>
</li>
</ul>
By using this code we can display the
On-Off image, in the it will be by default off position.
But I need the 'On' position by default.
can you some one help me out for this.
The simplest solution is to add "checked" to the <input> tag:
Toggle The <span class="toggle"><input type="checkbox" checked/></span>
IF you want to handle programmaticaly:
$('toggle input[type="checkbox"]').attr('checked', true)
If you put that in your .Ready() (or page loaded function) the checkbox will be checked by default.
I would recommend that you give the Checkbox an id so that you can specify exactly which you want to change:
<ul>
<li>
Toggle The <span class="toggle"><input id="myCheckbox" type="checkbox"/></span>
</li>
</ul>
Then use:
$('#myCheckbox').attr('checked', true)
How do you add a bullet list and stylized numbered list using JasperReports?
Try:
Add static text (or a text field).
Set Markup in the Properties panel to: html
Use the following HTML markup in the text:
<ul>
<li>bulleted item 1</li>
<li>bulleted item 2</li>
</ul>
<ol>
<li>ordered item 1</li>
<li>ordered item 2</li>
</ol>
The problem starts, where we want to do automatic numbering without CSS styles. I solved this by implementing own JRDataSource.